<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="flex items-center">
        <uni-icons type="wifi-filled" size="22" color="#333333" class="mr-2"></uni-icons>
        <uni-icons type="battery" size="22" color="#333333"></uni-icons>
      </view>
    </view>
    
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-left" @tap="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-bar-title">优惠券</view>
      <view class="nav-bar-right"></view>
    </view>
    
    <!-- 标签页 -->
    <view class="tab-header">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="tab-item" 
        :class="{ active: activeTabIndex === index }"
        @tap="switchTab(index)"
      >
        {{ tab.name }}
      </view>
    </view>
    
    <!-- 分割线 -->
    <view class="tab-line">
      <view class="tab-line-active" :style="{ left: tabLineLeft }"></view>
    </view>
    
    <!-- 优惠券列表 -->
    <scroll-view scroll-y class="coupon-scroll">
      <view class="coupon-list">
        <!-- 可使用tab -->
        <block v-if="activeTabIndex === 0">
          <!-- 满减券 -->
          <view class="coupon-item" @tap="selectCoupon(coupons[0])">
            <view class="coupon-left">
              <view class="coupon-amount">¥20</view>
              <view class="coupon-condition">满200可用</view>
            </view>
            <view class="coupon-right">
              <view class="coupon-type">满减优惠券</view>
              <view class="coupon-scope">全场通用</view>
              <view class="coupon-date">有效期至：2024-12-31</view>
            </view>
          </view>
          
          <!-- 折扣券 -->
          <view class="coupon-item discount" @tap="selectCoupon(coupons[1])">
            <view class="coupon-left">
              <view class="coupon-amount">8.8折</view>
              <view class="coupon-condition">无门槛</view>
            </view>
            <view class="coupon-right">
              <view class="coupon-type">折扣优惠券</view>
              <view class="coupon-scope">指定菜品可用</view>
              <view class="coupon-date">有效期至：2024-12-31</view>
            </view>
          </view>
        </block>
        
        <!-- 已使用tab -->
        <view v-if="activeTabIndex === 1 && usedCoupons.length === 0" class="empty-tip">
          <uni-icons type="info" size="64" color="#ddd"></uni-icons>
          <text class="empty-text">暂无已使用的优惠券</text>
        </view>
        
        <!-- 已过期tab -->
        <view v-if="activeTabIndex === 2 && expiredCoupons.length === 0" class="empty-tip">
          <uni-icons type="info" size="64" color="#ddd"></uni-icons>
          <text class="empty-text">暂无已过期的优惠券</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 标签页数据
const tabs = ref([
  { name: '可使用(2)' },
  { name: '已使用' },
  { name: '已过期' }
]);

// 当前激活的标签页索引
const activeTabIndex = ref(0);

// 标签线条位置
const tabLineLeft = computed(() => {
  return `${(100 / tabs.value.length) * activeTabIndex.value}%`;
});

// 优惠券数据
const coupons = ref([
  {
    id: 1,
    type: 'reduction',
    amount: 20,
    condition: '满200可用',
    title: '满减优惠券',
    scope: '全场通用',
    expiryDate: '2024-12-31'
  },
  {
    id: 2,
    type: 'discount',
    amount: 8.8,
    condition: '无门槛',
    title: '折扣优惠券',
    scope: '指定菜品可用',
    expiryDate: '2024-12-31'
  }
]);

// 已使用优惠券
const usedCoupons = ref([]);

// 已过期优惠券
const expiredCoupons = ref([]);

// 切换标签页
const switchTab = (index: number) => {
  activeTabIndex.value = index;
};

// 选择优惠券
const selectCoupon = (coupon: any) => {
  uni.showToast({
    title: `已选择${coupon.title}`,
    icon: 'none'
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 101;
}

.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: sticky;
  top: 44px;
  z-index: 100;
}

.nav-bar-left {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.nav-bar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.nav-bar-right {
  width: 80rpx;
}

.tab-header {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
  padding: 10rpx 0;
}

.tab-item.active {
  color: vars.$primary-color;
  font-weight: 500;
}

.tab-line {
  height: 6rpx;
  background-color: #eee;
  position: relative;
}

.tab-line-active {
  position: absolute;
  width: calc(100% / 3);
  height: 6rpx;
  background-color: vars.$primary-color;
  transition: all 0.3s;
}

.coupon-scroll {
  flex: 1;
  padding: 20rpx;
}

.coupon-list {
  padding-bottom: 30rpx;
}

.coupon-item {
  display: flex;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.coupon-item::before {
  content: "";
  position: absolute;
  left: 180rpx;
  top: 0;
  bottom: 0;
  width: 2rpx;
  background: repeating-linear-gradient(to bottom, #e0e0e0 0, #e0e0e0 8rpx, transparent 8rpx, transparent 16rpx);
  z-index: 2;
}

.coupon-left {
  width: 180rpx;
  background-color: vars.$primary-color;
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.coupon-amount {
  font-size: 44rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.coupon-condition {
  font-size: 22rpx;
  opacity: 0.8;
}

.coupon-right {
  flex: 1;
  padding: 24rpx 30rpx;
}

.coupon-type {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
  color: #333;
}

.coupon-scope {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.coupon-date {
  font-size: 24rpx;
  color: #999;
}

.discount .coupon-left {
  background-color: #FF9900;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}
</style> 